<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖动上传</title>
</head>
<body>
<div id="dropbox">
	
<h1>拖到这里试试</h1>
</div>
<div id="preview"></div>
<div id="fileList"></div>
</body>
<style>
	#dropbox{
		border: 1px solid #002;
	}
	#preview img{
		max-width: 80%
	}
</style>
<script>
	let dropbox,preview,fileList

	dropbox = document.getElementById("dropbox");
	preview = document.getElementById("preview");
	fileList = document.getElementById("fileList");
	dropbox.addEventListener("dragenter", dragenter, false);
	dropbox.addEventListener("dragover", dragover, false);
	dropbox.addEventListener("drop", drop, false);

	function dragenter(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}

	function dragover(e) {
	  e.stopPropagation();
	  e.preventDefault();
	}

	function drop(e) {
	  e.stopPropagation();
	  e.preventDefault();

	  var dt = e.dataTransfer;
	  var files = dt.files;

	  console.log(files);
	  handleFiles(files);
	}

/*
	function handleFiles(files) {
	  for (var i = 0; i < files.length; i++) {
	    var file = files[i];
	    var imageType = /^image\//;
	    
	    if (!imageType.test(file.type)) {
	      continue;
	    }
	    
	    var img = document.createElement("img");
	    img.classList.add("obj");
	    img.file = file;
	    preview.appendChild(img); // 假设"preview"就是用来显示内容的div
	    
	    var reader = new FileReader();
	    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
	    reader.readAsDataURL(file);
	  }
	}*/

	function handleFiles(files) {
		console.profile('666')

	  if (!files.length) {
	    fileList.innerHTML = "<p>No files selected!</p>";
	  } else {
	    fileList.innerHTML = "";
	    var list = document.createElement("ul");
	    fileList.appendChild(list);
	    for (var i = 0; i < files.length; i++) {
	      var li = document.createElement("li");
	      list.appendChild(li);
	      
	      var img = document.createElement("img");
	      img.src = window.URL.createObjectURL(files[i]);
	      img.height = 60;
	      img.onload = function() {
	        window.URL.revokeObjectURL(this.src);//释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象
	      }
	      li.appendChild(img);
	      var info = document.createElement("span");
	      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
	      li.appendChild(info);
	    }
	  }
		console.profileEnd('666')
	}
</script>
</html>